
<template>
  <view class="profile-center">
    <!-- 用户信息 -->
    <view class="user-info-card">
      <view class="user-avatar">
        <image :src="userInfo.avatar" mode="aspectFill"></image>
      </view>
      <view class="user-details">
        <text class="user-name">{{ userInfo.name }}</text>
        <text class="user-phone">{{ userInfo.phone }}</text>
      </view>
    </view>

    <!-- 功能列表 -->
    <view class="function-list">
      <!-- 消息通知 -->
      <view class="function-item" @tap="goToNotifications">
        <view class="function-icon notification-icon">
          <uni-icons type="notification" size="24" color="#fff"></uni-icons>
        </view>
        <text class="function-text">日常通知</text>
        <view class="function-badge" v-if="notificationCount > 0">
          {{ notificationCount > 99 ? '99+' : notificationCount }}
        </view>
        <view class="function-arrow">
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>

      <!-- 联系客服 -->
      <view class="function-item" @tap="contactService">
        <view class="function-icon service-icon">
          <uni-icons type="service" size="24" color="#fff"></uni-icons>
        </view>
        <text class="function-text">联系客服</text>
        <view class="function-arrow">
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>

      <!-- 工地通知 -->
      <view class="function-item" @tap="goToBuildNotifications">
        <view class="function-icon build-icon">
          <uni-icons type="location" size="24" color="#fff"></uni-icons>
        </view>
        <text class="function-text">工地通知</text>
        <view class="function-badge" v-if="buildNotificationCount > 0">
          {{ buildNotificationCount > 99 ? '99+' : buildNotificationCount }}
        </view>
        <view class="function-arrow">
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>

      <view class="function-item" @tap="goToFav">
        <view class="function-icon notification-icon">
          <uni-icons type="notification" size="24" color="#fff"></uni-icons>
        </view>
        <text class="function-text">我的收藏</text>
        <view class="function-badge" v-if="favCount > 0">
          {{ favCount > 99 ? '99+' : favCount }}
        </view>
        <view class="function-arrow">
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>

      <!-- 帮助中心 -->
      <view class="function-item" @tap="goToHelpCenter">
        <view class="function-icon help-icon">
          <uni-icons type="help" size="24" color="#fff"></uni-icons>
        </view>
        <text class="function-text">帮助中心</text>
        <view class="function-arrow">
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>

      <!-- 清除缓存 -->
      <view class="function-item" @tap="clearCache">
        <view class="function-icon cache-icon">
          <uni-icons type="trash" size="24" color="#fff"></uni-icons>
        </view>
        <text class="function-text">清除缓存</text>
        <text class="cache-size">{{ cacheSize }}</text>
        <view class="function-arrow">
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 退出登录 -->
    <view class="logout-section">
      <button class="logout-btn" @tap="logout">退出登录</button>
    </view>
  </view>
</template>

<script>export default {
  data() {
    return {
      userInfo: {
        name: '张三',
        phone: '138****8888',
        avatar: '/static/icon/用户.png'
      },
      favCount:6,
      notificationCount: 3,
      buildNotificationCount: 5,
      cacheSize: '45.2MB'
    }
  },
  methods: {
    goToNotifications() {
      uni.navigateTo({
        url: '/pages/user/notice_list'
      });
    },

    goToFav() {
      uni.navigateTo({
        url: '/pages/user/fav_list'
      });
    },

    contactService() {
      uni.makePhoneCall({
        phoneNumber: '400-888-8888'
      });
    },

    goToBuildNotifications() {
      uni.navigateTo({
        url: '/pages/user/build-notifications'
      });
    },
    goToHelpCenter() {
      uni.navigateTo({
        url: '/pages/user/help_center'
      });
    },
    goToHelpDetail() {
      uni.navigateTo({
        url: '/pages/user/help_detail'
      });
    },

    clearCache() {
      uni.showModal({
        title: '清除缓存',
        content: '确定要清除所有缓存数据吗？',
        success: (res) => {
          if (res.confirm) {
            // 模拟清除缓存
            this.cacheSize = '0KB';
            uni.showToast({
              title: '缓存清除成功',
              icon: 'success'
            });
          }
        }
      });
    },

    logout() {
      uni.showModal({
        title: '退出登录',
        content: '确定要退出当前账号吗？',
        success: (res) => {
          if (res.confirm) {
            // 执行退出登录逻辑
            uni.redirectTo({
              url: '/pages/login/login'
            });
          }
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>.profile-center {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
}

.header-section {
  margin-bottom: 30rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  position: relative;
  padding-left: 20rpx;
}

.page-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8rpx;
  height: 36rpx;
  background: linear-gradient(to bottom, #e4393c, #409EFF);
  border-radius: 4rpx;
}

.user-info-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20rpx;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar image {
  width: 100%;
  height: 100%;
}

.avatar-placeholder {
  font-size: 50rpx;
}

.user-details {
  flex: 1;
}

.user-name {
  display: block;
  font-size: 32rpx;
  color: #333;
  margin-bottom: 10rpx;
  font-weight: bold;
}

.user-phone {
  font-size: 26rpx;
  color: #999;
}

.arrow-icon {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.function-list {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.function-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  position: relative;

  &:last-child {
    border-bottom: none;
  }
}

.function-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.notification-icon {
  background-color: #409EFF;
}

.service-icon {
  background-color: #67C23A;
}

.build-icon {
  background-color: #E6A23C;
}

.file-icon {
  background-color: #909399;
}

.help-icon {
  background-color: #E4393C;
}

.cache-icon {
  background-color: #909399;
}

.function-text {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.function-badge {
  background-color: #e4393c;
  color: #fff;
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 40rpx;
  margin-right: 20rpx;
  min-width: 20rpx;
  text-align: center;
}

.cache-size {
  font-size: 26rpx;
  color: #999;
  margin-right: 20rpx;
}

.function-arrow {
  width: 30rpx;
  height: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logout-section {
  padding: 0 20rpx;
}

.logout-btn {
  width: 100%;
  background-color: #e4393c;
  color: #fff;
  border: 1rpx solid #e4393c;
  border-radius: 8rpx;
  padding: 10rpx;
  font-size: 32rpx;
  font-weight: bold;
}
</style>